<template>
  <div>
    <el-card>
      <p class="pinformation">当前方案信息</p>
      <el-form label-width="80px" :model="form">
        <el-row>
          <el-col :span="4">
            <el-form-item label="方案编号：">
              {{ form.contractCode }}
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="方案名称：">
              {{ form.contractName }}
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="方案类型：">
              {{ form.contractType }}
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="委托单位：" prop="wtCustomName">
              {{ form.wtCustomName }}
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item
              label="方案开始时间："
              prop="planDate"
              label-width="120"
            >
              {{ form.planDate }}
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item
              label="要求完成时间："
              prop="endTime"
              label-width="120"
            >
              {{ form.endTime }}
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-card>
    <el-row style="margin-top: 3px" :gutter="3">
      <el-col :span="12">
        <el-card>
          <p class="pinformation">未交接样品搜索</p>
          <el-form label-width="80px" ref="queryRef" :model="queryParams">
            <el-row>
              <el-col :span="8">
                <el-form-item label="点位名称：" prop="pointName">
                  <el-input
                    maxlength="100"
                    clearable
                    placeholder="请输入点位名称"
                    v-model="queryParams.pointName"
                    @keyup.enter="handleQuery"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="第几天：" prop="sampleDay">
                  <el-input
                    maxlength="100"
                    clearable
                    placeholder="请输入第几天"
                    v-model="queryParams.sampleDay"
                    @keyup.enter="handleQuery"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="频次：" prop="sampleCount">
                  <el-input
                    maxlength="100"
                    clearable
                    placeholder="请输入频次"
                    v-model="queryParams.sampleCount"
                    @keyup.enter="handleQuery"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="4">
                <el-row justify="center">
                  <el-button type="success" @click="handleQuery"
                    >搜索</el-button
                  >
                  <el-button class="business resetBtn" @click="resetQuery"
                    >重置</el-button
                  >
                </el-row>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="6">
                <el-form-item label="是否分包：" prop="isPackage">
                  <el-select clearable v-model="queryParams.isPackage">
                    <el-option
                      v-for="dict in isPackageList"
                      :key="dict.value"
                      :label="dict.label"
                      :value="parseInt(dict.value)"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="检测类型：" prop="jclbId">
                  <el-select
                    v-model="queryParams.jclbId"
                    clearable
                    style="width: 100%"
                  >
                    <el-option
                      v-for="item in proxy.addListNoLimit(
                        jclbList,
                        'jclbId',
                        'jclbName'
                      )"
                      :key="item.jclbId"
                      :value="item.jclbId"
                      :label="item.jclbName"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
          <el-row>
            <p class="pinformation">未交接样品列表</p>
            <p class="totalStyle">共 {{ total }} 条数据</p>
          </el-row>
          <el-table
            :data="noSampleWithList"
            ref="noSampleWithListTableRef"
            v-loading="loading"
            @select-all="handleSelectAll"
            @select="handeleSelect"
          >
            <el-table-column type="selection" width="55" align="center" />
            <el-table-column
              label="样品编号"
              align="center"
              prop="sampleCode"
              width="140"
            />
            <el-table-column
              label="检测项目"
              align="center"
              prop="jcxmNames"
              show-overflow-tooltip
            >
            <template #default="scope">
            <span v-html="proxy.getSupAndSub(scope.row.jcxmNames)"></span>
          </template>
        </el-table-column>
            <el-table-column label="点位名称" align="center" prop="pointName" width="100"/>
            <el-table-column label="检测类别" align="center" prop="jclbName" width="120" show-overflow-tooltip/>
            <el-table-column
              label="第几天"
              align="center"
              prop="sampleDay"
              width="80"
            />
            <el-table-column
              label="频次"
              align="center"
              prop="sampleCount"
              width="60"
            />
            <el-table-column label="是否分包" align="center" width="80">
              <template #default="scope">{{
                scope.row.isPackage ? "是" : "否"
              }}</template>
            </el-table-column>
          </el-table>
          <pagination
            v-show="total > 0"
            :total="total"
            v-model:page="queryParams.pageNum"
            v-model:limit="queryParams.pageSize"
            @pagination="getNoList"
          />
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card style="height: 100%">
          <p class="pinformation">拟交接样品搜索</p>
          <el-form
            label-width="80px"
            ref="queryRightRef"
            :model="queryParamsRight"
          >
            <el-row>
              <el-col :span="19">
                <el-form-item label="点位名称：" prop="pointName">
                  <el-input
                    maxlength="100"
                    clearable
                    placeholder="请输入频次"
                    v-model="queryParamsRight.pointName"
                    @keyup.enter="handleQueryRight"
                    :disabled="withId ? false : true"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="5">
                <el-form-item label="是否分包：" prop="isPackage">
                  <el-select
                    clearable
                    v-model="queryParamsRight.isPackage"
                    :disabled="withId ? false : true"
                  >
                    <el-option
                      v-for="dict in isPackageList"
                      :key="dict.value"
                      :label="dict.label"
                      :value="parseInt(dict.value)"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="6">
                <el-form-item label="第几天：" prop="sampleDay">
                  <el-input
                    maxlength="100"
                    clearable
                    placeholder="请输入第几天"
                    v-model="queryParamsRight.sampleDay"
                    @keyup.enter="handleQueryRight"
                    :disabled="withId ? false : true"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="频次：" prop="sampleCount">
                  <el-input
                    maxlength="100"
                    clearable
                    placeholder="请输入频次"
                    v-model="queryParamsRight.sampleCount"
                    @keyup.enter="handleQueryRight"
                    :disabled="withId ? false : true"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="7">
                <el-form-item label="检测类型：" prop="jclbId">
                  <el-select
                    v-model="queryParamsRight.jclbId"
                    clearable
                    style="width: 100%"
                    :disabled="withId ? false : true"
                  >
                    <el-option
                      v-for="item in proxy.addListNoLimit(
                        jclbList,
                        'jclbId',
                        'jclbName'
                      )"
                      :key="item.jclbId"
                      :value="item.jclbId"
                      :label="item.jclbName"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="5">
                <el-row justify="end">
                  <el-button
                    type="success"
                    style="margin-left: 15px"
                    @click="handleQueryRight"
                    :disabled="withId ? false : true"
                    >搜索</el-button
                  >
                  <el-button
                    class="business resetBtn"
                    @click="resetQueryRight"
                    :disabled="withId ? false : true"
                    >重置</el-button
                  >
                </el-row>
              </el-col>
            </el-row>
          </el-form>
          <el-row>
            <p class="pinformation" style="margin-top: 8.5px">拟交接记录列表</p>
            <p class="totalStyle" style="margin-top: 6px">
              共 {{ niSampleWithList.length }} 条数据
            </p>
            <el-row
              style="
                padding-bottom: 15px;
                margin-left: 15px;
                margin-right: 15px;
              "
            >
              <el-button
                type="success"
                link
                style="color: red !important"
                @click="deleteNiSampleWith"
                :disabled="!niSFIds.length"
                >批量删除</el-button
              >
              <el-button
                type="success"
                link
                icon="Plus"
                :disabled="!niSFIds.length"
                >扫码交接</el-button
              >
            </el-row>
            <el-form-item label="扫码结果：" prop="zanwu">
              <el-input
                maxlength="100"
                clearable
                placeholder="请输入扫码结果"
                v-model="queryParams.zanwu"
              />
            </el-form-item>
          </el-row>
          <el-table
            :data="niSampleWithList"
            ref="niSampleWithListTableRef"
            v-loading="loadingRight"
            @selection-change="handleSelectionRightChange"
          >
            <el-table-column type="selection" width="55" align="center" />
            <el-table-column
              label="样品编号"
              align="center"
              prop="sampleCode"
            />
            <el-table-column
              label="检测项目"
              align="center"
              prop="jcxmNames"
              show-overflow-tooltip
            >
            <template #default="scope">
            <span v-html="proxy.getSupAndSub(scope.row.jcxmNames)"></span>
          </template>
        </el-table-column>
            <el-table-column label="点位名称" align="center" prop="pointName" />
            <el-table-column label="检测类别" align="center" prop="jclbName" />
            <el-table-column
              label="第几天"
              align="center"
              prop="sampleDay"
              width="100"
            />
            <el-table-column
              label="频次"
              align="center"
              prop="sampleCount"
              width="100"
            />
            <el-table-column label="是否分包" align="center" width="100">
              <template #default="scope">{{
                scope.row.isPackage ? "是" : "否"
              }}</template>
            </el-table-column>
            <el-table-column
              label="数量"
              align="center"
              width="120"
              prop="sumCount"
            >
              <template #default="scope">
                <el-input-number
                  v-model="scope.row.sumCount"
                  style="width: 100%"
                  controls-position="right"
                  :min="1"
                  @change="sumCountChange(scope.row)"
                />
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup name="AddSampleWith">
import {
  getTopFormDate,
  getNoSampleWithList,
  getYesSampleWithList,
  putNiList,
  delNiSampleWith,
  putSumCount,
} from "@/api/sampleManage/sampleWith";
import { allListJclb } from "@/api/store/jclb";
const { proxy } = getCurrentInstance();
const form = ref({ contract: {} });
const total = ref(0);
const noSampleWithList = ref([]);
const niSampleWithList = ref([]);
const loading = ref(false);
const loadingRight = ref(false);
const queryParams = ref({
  pageNum: 1,
  pageSize: 10,
  projectId: props.projectId,
  isPackage: -1,
  jclbId: -1,
});
const queryParamsRight = ref({
  pageNum: 1,
  pageSize: 10,
  projectId: props.projectId,
  isPackage: -1,
  jclbId: -1,
});

const isPackageList = ref([
  { value: -1, label: "不限" },
  { value: 0, label: "否" },
  { value: 1, label: "是" },
]);

const heightParams = ref([
  { tableName: "noSampleWithList", bottomHeight: 225 },
  { tableName: "niSampleWithList", bottomHeight: 180 },
]);

const props = defineProps({
  projectId: {
    type: String, //参数类型
  },
  withId: {
    type: String, //参数类型
  },
});

const withId = ref("");

watch(
  () => props.withId,
  () => {
    nextTick(() => {
      if (props.withId) {
        withId.value = props.withId;
        getNiList();
      }
    });
  },
  { deep: true, immediate: true }
);

function getTableHeight() {
  proxy.adaptiveHeight(proxy, heightParams.value);
}
onMounted(() => {
  nextTick(() => {
    getTableHeight();
    window.addEventListener("resize", getTableHeight);
  })
})
onUpdated(() => {
  nextTick(function () {
    getTableHeight();
  });
});
onBeforeUnmount(() => {
  window.removeEventListener("resize", getTableHeight);
});

function handleQuery() {
  queryParams.value.pageNum = 1;
  getNoList();
}
function handleQueryRight() {
  queryParamsRight.value.pageNum = 1;
  getNiList();
}
function resetQuery() {
  proxy.resetForm("queryRef");
  handleQuery();
}
function resetQueryRight() {
  proxy.resetForm("queryRightRef");
  handleQueryRight();
}
function getList() {
  getTopFormDate(props.projectId).then((res) => {
    form.value = res.data;
  });
  getNoList();
}

function getNoList() {
  nextTick(() => {
    loading.value = true;
    queryParams.value.withId = withId.value;
    getNoSampleWithList(queryParams.value).then((res) => {
      noSampleWithList.value = res.rows;
      total.value = res.total;
      loading.value = false;
      nextTick(() => {
        noSampleWithList.value.forEach((item, index) => {
          if (item.withId) {
            proxy.$refs["noSampleWithListTableRef"].toggleRowSelection(
              noSampleWithList.value[index],
              true
            );
          }
        });
      });
    });
  });
}

function getNiList() {
  loadingRight.value = true;
  queryParamsRight.value.withId = withId.value;
  getYesSampleWithList(queryParamsRight.value).then((res) => {
    niSampleWithList.value = res.data;
    loadingRight.value = false;
  });
}

function handleSelectAll(selection) {
  if (selection.length > 0) {
    let temp = {
      sFIds: selection.map((item) => {
        return item.sFId;
      }),
      withId: withId.value,
    };
    putNiList(temp)
      .then((res) => {
        if (!withId.value) {
          withId.value = res.data;
        }
        selection.forEach((item) => {
          if (!item.withId) {
            item.withId = res.data;
          }
          item.sumCount = 1;
          niSampleWithList.value.unshift(item);
        });
        for (var i = 0; i < niSampleWithList.value.length - 1; i++) {
          for (var j = i + 1; j < niSampleWithList.value.length; j++) {
            if (niSampleWithList.value[i].sFId == niSampleWithList.value[j].sFId) {
              niSampleWithList.value.splice(j, 1);
              j--;
            }
          }
        }
      })
      .catch(() => {
        noSampleWithList.value.forEach((item) => {
          proxy.$refs["noSampleWithListTableRef"].toggleRowSelection(
            item,
            false
          );
        });
      });
  } else {
    let temp = noSampleWithList.value.map((item) => {
      return item.sFId;
    });
    delNiSampleWith(temp)
      .then(() => {
        noSampleWithList.value.forEach((item) => {
          delete item.withId;
        });
        getNiList();
      })
      .catch(() => {
        noSampleWithList.value.forEach((item) => {
          proxy.$refs["noSampleWithListTableRef"].toggleRowSelection(
            item,
            true
          );
        });
      });
  }
}

const niSFIds = ref([]);

function handleSelectionRightChange(selection) {
  niSFIds.value = selection.map((item) => {
    return item.sFId;
  });
}

function deleteNiSampleWith() {
  proxy.$modal.confirm("确认要删除选中的样品吗？").then((res) => {
    delNiSampleWith(niSFIds.value).then((res1) => {
      proxy.$modal.msgSuccess("删除成功");
      getNoList();
      getNiList();
    });
  });
}

function handeleSelect(selection, row) {
  if (!row.withId) {
    let temp = {
      sFIds: [row.sFId],
      withId: withId.value,
    };
    putNiList(temp)
      .then((res) => {
        if (!withId.value) {
          withId.value = res.data;
        }
        row.withId = res.data;
        row.sumCount = 1;
        niSampleWithList.value.unshift(row);
      })
      .catch((res) => {
        proxy.$refs["noSampleWithListTableRef"].toggleRowSelection(row, false);
      });
  } else {
    delNiSampleWith(row.sFId)
      .then(() => {
        delete row.withId;
        getNiList();
      })
      .catch((res) => {
        proxy.$refs["noSampleWithListTableRef"].toggleRowSelection(row, true);
      });
  }
}

function sumCountChange(row) {
  let temp = {
    sFId: row.sFId,
    sumCount: row.sumCount,
  };
  putSumCount(temp);
}

const jclbList = ref([]);

allListJclb().then((res) => {
  jclbList.value = res.data;
});

getList();
</script>

<style></style>
